<template>
	<el-card class="box-card" style="margin: 10px 0px">
		<div slot="header" class="clearfix">
			<!--  @tab-click="handleClick" -->
			<!-- 头部左侧内容 -->
			<el-tabs class="tab" v-model="activeName">
				<el-tab-pane label="销售额" name="sale"></el-tab-pane>
				<el-tab-pane label="访问量" name="visite"></el-tab-pane>
			</el-tabs>
			<!-- 头部右侧内容 -->
			<div class="right">
				<span @click="setDay">今日</span>
				<span @click="setWeek">本周</span>
				<span @click="setMonth">本月</span>
				<span @click="setYear">本年</span>
				<!--    v-model="value1" -->
				<el-date-picker v-model="date" class="date" type="daterange" range-separator="-"
					start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
				</el-date-picker>
			</div>
		</div>
		<div>
			<el-row :gutter="10">
				<el-col :span="18">
					<!-- 容器 -->
					<div class="charts" ref="charts"></div>
				</el-col>
				<el-col :span="6" class="right">
					<h3>门店{{ title }}排名</h3>
					<ul>
						<li>
							<span class="rindex">1</span>
							<span>肯德基</span>
							<span class="rvalue">Monday</span>
						</li>
						<li>
							<span class="rindex">2</span>
							<span>麦当劳</span>
							<span class="rvalue">Tuesday</span>
						</li>
						<li>
							<span class="rindex">3</span>
							<span>周黑鸭</span>
							<span class="rvalue">Wednesday</span>
						</li>
						<li>
							<span>4</span>
							<span>汉堡王</span>
							<span class="rvalue">Thursday</span>
						</li>
						<li>
							<span>5</span>
							<span>海底捞</span>
							<span class="rvalue">Friday</span>
						</li>
						<li>
							<span>6</span>
							<span>真功夫</span>
							<span class="rvalue">Saturday</span>
						</li>
						<li>
							<span>7</span>
							<span>永和大王</span>
							<span class="rvalue">Sunday</span>
						</li>
					</ul>
				</el-col>
			</el-row>
		</div>
	</el-card>
</template>

<script>
	// 引入echarts
	import * as echarts from 'echarts'
	import dayjs from 'dayjs'
	export default {
		name: 'Sale',
		data() {
			return {
				activeName: 'sale',
				myCharts: null,
				//收集日历数据
				date: [],
			}
		},
		mounted() {
			this.myCharts = echarts.init(this.$refs.charts)
			this.myCharts.setOption({
				title: {
					text: this.title + "趋势"
				},
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "shadow",
					}
				},
				grid: {
					left: "3%",
					right: "4%",
					bottom: "3%",
					containLabel: true,
				},
				xAxis: [{
					type: "category",
					data: [],
					axisTick: {
						alignWithLabel: true,
					},
				}],
				yAxis: [{
					type: "value",
				}],
				series: [{
					name: "Direct",
					type: "bar",
					barWidth: "60%",
					data: [10,20,30,40],
					color: "yellowgreen",
				}],
				tooltip:{}
			});
			this.setDay()
		},
		computed: {
			// 计算属性值标题
			title() {
				return this.activeName == 'sale' ? '销售额' : '访问量'
			}
		},
		// 监听属性
		watch: {
			title() {
				// 重绘
				this.myCharts.setOption({
					title: {
						text: this.title
					}
				})
			}
		},
		methods: {
			setDay() {
				const day = dayjs().format('YYYY-MM-DD')
				this.date = [day, day]
			},
			setWeek() {
				const start = dayjs().day(1).format('YYYY-MM-DD')
				const end = dayjs().day(7).format('YYYY-MM-DD')
				this.date = [start, end]
			},
			setMonth() {
				const start = dayjs().startOf("month").format("YYYY-MM-DD");
				const end = dayjs().endOf("month").format("YYYY-MM-DD");
				this.date = [start, end];
			},
			setYear() {
				const start = dayjs().startOf("year").format("YYYY-MM-DD");
				const end = dayjs().endOf("year").format("YYYY-MM-DD");
				this.date = [start, end];
			}
		}
	}
</script>

<style scoped>
	.clearfix {
		position: relative;
		display: flex;
		justify-content: space-between;
	}

	.tab {
		width: 100%;
	}

	.right {
		position: absolute;
		right: 0px;
	}

	.date {
		width: 250px !important;
		margin: 0px 20px;
	}

	.right>h3 {
		margin: 0;
		padding: 0;
	}

	.right span {
		margin: 0px 10px;
	}

	.charts {
		width: 100%;
		height: 300px;
	}

	ul {
		list-style: none;
		width: 100%;
		height: 300px;
		padding: 0px;
	}

	ul li {
		height: 8%;
		margin: 10px 0px;
	}

	.rindex {
		float: left;
		width: 20px;
		height: 20px;
		line-height: 20px;
		border-radius: 50%;
		background: black;
		color: white;
		text-align: center;
	}

	.rvalue {
		float: right;
	}
</style>
